<template>
	<picker @change="bindPickerChange" :value="index" :range="options" :range-key="labelKey">
		<slot/>
	</picker>
</template>

<script>
	export default {
		name:"HPicker",
		props: {
			model:{
				type:String,
				default:""
			},
			label:{
				type:String,
				default:""
			},
			options: {
				type: Array,
				default: () => []
			},
			labelKey:{
				type:String,
				default:'label'
			},
			valueKey:{
				type:String,
				default:'value'
			}
		},
		data() {
			return {
				index: 0
			}
		},
		methods: {
			bindPickerChange: function(e) {
				this.index = e.target.value;
				this.$emit("update:model",this.options[this.index][this.valueKey])
				this.$emit("update:label",this.options[this.index][this.labelKey])
				this.$emit("change",this.index)
			}
		}
	}
</script>
